<template>
  <tabbar slot="bottom">
    <tabbar-item
      v-for="item in items"
      :key="item.key"
      :link="item.link"
      :selected="item.selected"
      :badge="item.badge"
    >
      <img slot="icon" :src="item.icon">
      <img slot="icon-active" :src="item.active">
      <span slot="label">{{item.label}}</span>
    </tabbar-item>
  </tabbar>
</template>
<script>
import { Tabbar, TabbarItem } from 'vux'
export default {
  components: {
    Tabbar,
    TabbarItem
  },
  data () {
    return {
      items: [{ key: 'vote_list',
        label: '首页',
        icon: require('../assets/home_normal.png'),
        active: require('../assets/home_selected.png'),
        link: '/vote_list',
        badge: '',
        selected: false },    
      { key: 'my_info',
        label: '我的',
        icon: require('../assets/user_normal.png'),
        active: require('../assets/user_selected.png'),
        link: '/my_info',
        badge: '',
        selected: false }]
    }
  },
  props: {
    selectedKey: String,
    badge: String
  },
  methods: {
    init () {
      for (let i = 0; i < this.items.length; i++) {
        const item = this.items[i]
        if (item.key === this.selectedKey) {
          this.items[i].selected = true
          this.items[i].badge = this.badge
        } else {
          this.items[i].selected = false
          this.items[i].badge = ''
        }
      }
    }
  },
  watch: {
    badge: function (val) {
      console.log(val)
      // 因为badge是异步获得的，并没有在mounted的时候获取正确的值，所以要用watch监控
      this.init()
    }
  },
  mounted () {
    this.init()
  },
  computed: {
  }
}
</script>